<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>3D表白相册</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <!--/*外层最大容器*/-->
        <div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="img/150737-1620457657f28d.jpg"  class="pic"/>
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="img/150824-16204577043623.jpg"  class="pic"/>
            </div>
            <!--左图片 -->
            <div class="out_left">
                <img src="img/173640-1620466600fb9b.jpg"  class="pic"/>
            </div>
            <div class="out_right">
                <img src="img/193151-162151031144dc.jpg"  class="pic"/>
            </div>
            <div class="out_top">
                <img src="img/193257-16215103778919.jpg"  class="pic"/>
            </div>
            <div class="out_bottom">
                <img src="img/203954-1623933594b335.jpg"  class="pic"/>
            </div>
            <!--小正方体 --> 
            <span class="in_front">
                <img src="img/211606-162324456621c4.jpg" class="in_pic" />
            </span>
            <span class="in_back">
                 <img src="img/224204-1620744124ecd7.jpg" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="img/224716-16191892361adb.jpg" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="img/225658-162428741823f5.jpg" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="./img/224813-1603896493456e.jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="img/203954-1623933594b335.jpg" class="in_pic" />
            </span>
        </div>
        </div>
    </body>
</html>
